<!-- 视频 -->
<template>
	<el-tabs type="border-card" class="tabsbox">
		<!-- <el-tab-pane  :label="itme.name" v-for="itme in list" :key="itme.id" :tab-click="clickHandler(itme.id)"> 
		</el-tab-pane> -->
		<div class="itme">
			<span v-for="itme in list" :key="itme.id" @click="clickHandler(itme.id)">{{ itme.name }}</span>
		</div>

			<el-card v-for="items in contentList" :key="items.description" class="card" shadow="hover" >
				<img :src="items.coverUrl" class="image" />
				<div style="padding: 14px" class="card-content">
					<span>{{ items.description ? items.description : '无任何节目信息' }}</span>
					<div class="bottom">
						<!-- <el-button text class="button">{{ items.description}}</el-button> -->
					</div>
				</div>
			</el-card>
		

	</el-tabs>
</template>


<script setup lang="ts">
import { getVideoTagsApi, getVideocontentApi } from '@/api/videoApi'
import type { IData, IDataVideo } from '@/api/videoApi'
import { ref, onMounted } from 'vue'

const list = ref<IData[]>([])
const contentList = ref<IDataVideo[]>([])

const getVideoList = async () => {
	try {
		const res = await getVideoTagsApi()
		list.value = res.data.slice(0, 10)
		
	} catch (error) { console.log(111); }
}

const getVideoitemList = async (id) => {
	const content = await getVideocontentApi(id)
	contentList.value = []
	console.log(content.datas);
	content.datas.forEach(item => {
		contentList.value.push({
			coverUrl: item.data.coverUrl,
			description: item.data.description
		})
	})
	console.log('contentList', contentList.value);
}

const demo = (res) => {
	// console.log(res);
	getVideoitemList(res[0].id)       
	
}

const clickHandler = (id)=>{
	console.log(id);
	getVideoitemList(id)
}

onMounted(() => {
	new Promise(() => {
		getVideoList().then(() => {
			demo(list.value)
		})
	})
})

</script>


<style lang="scss" scoped>

.tabsbox{
	background-color: #222225;
}

.image {
	width: 300px;
	height: 180px;
}
.card {
	width: 400px;
	float: left;
	margin: 10px 10px;
	background-color: #605d5d;
	border: 1px solid red;
}

.card-content {
	width: 300px;
	height: 80px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;

}
// .itme{
// 	background-color: #777575;
// }
.itme >span{
	padding-left: 15px;
	color: #fff;
	&:hover{
		color: red;
	}
}



</style>